<template>
  <div>
    <el-button @click="addArticle">新增文章</el-button>
    <article-list v-if="articleShow === 'list'" v-on:turnPage="turnPage"></article-list>
    <add-article-from v-if="articleShow === 'add'"></add-article-from>
    <display-article v-if="articleShow === 'display'"
                     :articleId="articleId"
                     v-on:turnPage="turnPage"></display-article>
    <edit-article v-if="articleShow === 'edit'"
                  :articleId="articleId"
                  v-on:turnPage="turnPage"></edit-article>
  </div>
</template>

<script>
  import articleList from './ArticleList'
  import addArticleFrom from './AddArticleFrom'
  import displayArticle from './DisplayArticle'
  import editArticle from './EditArticle'

  export default {
    name: "ArticleManage",
    components: {
      articleList: articleList,
      addArticleFrom: addArticleFrom,
      displayArticle: displayArticle,
      editArticle: editArticle
    },
    data() {
      return {
        articleShow: 'list',
        articleId: ''
      }
    },
    methods: {

      turnPage(articleId, type) {
        this.articleId = articleId;
        this.articleShow = type;
      },

      addArticle: function () {
        this.articleShow = 'add'
      }
    }
  }
</script>

<style scoped>

</style>

